<?php echo $this->render('/public/header'); ?>
<?php use yii\helpers\Url;?>
    <script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.17.0/localization/messages_zh.min.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.0.11/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/element-ui/2.0.11/index.js"></script>
    <style>
        .error {
            color: red;
        }
        [v-cloak] {
            display: none;
        }
    </style>
    <div class="row">
    <div id="main" class="col-xs-12" v-cloak>
        <form action="" id="partySchForm" class="form-inline" method="get">
            <div class="left">
                <div class="form-group">
                    <input type="text" name="number" class="form-control" maxlength="100"
                           value="<?php echo yii::$app->request->get("number"); ?>" placeholder="搜索用户编号">
                </div>
                <div class="form-group">
                    <input type="text" name="customerName" class="form-control" maxlength="100"
                           value="<?php echo yii::$app->request->get("customerName"); ?>" placeholder="搜索用户">
                </div>

                <div class="form-group">
                    <input type="text" name="email" class="form-control" maxlength="100"
                           value="<?php echo yii::$app->request->get("email"); ?>" placeholder="搜索email">
                </div>


                <div class="form-group">
                    <select class="form-control" name="refer">
                        <option value=0>--选择客户来源--</option>
                        <?php foreach ($data['refer_list'] as $k => $v) {
    ?>
                            <option value="<?php echo $v['id']; ?>"
                                <?php if ((yii::$app->request->get('refer')) == $v['id']) {
        echo 'selected';
    }?>
                            >
                                <?php echo $v['name']; ?>

                            </option>
                        <?php }?>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" name="follow_man">
                        <option value=0>--选择跟进人--</option>
                        <?php foreach ($data['saleman_list'] as $k => $v) {
    ?>
                            <option value="<?php echo $v['job_number']; ?>"
                                <?php if ($v['job_number'] == yii::$app->request->get('follow_man')) {
        echo 'selected';
    }
    ;?>
                            ><?php echo $v['name']; ?>
                            </option>
                        <?php }?>
                    </select>
                </div>

                <div class="form-group">
                    <select class="form-control" name="property">
                        <option value=0>--选择订单属性--</option>
                        <option value=1 <?php if (yii::$app->request->get('property') == 1) {
    echo 'selected';
}?>>未下单
                        </option>
                        <option value=2 <?php if (yii::$app->request->get('property') == 2) {
    echo 'selected';
}?>>样品单
                        </option>
                        <option value=3 <?php if (yii::$app->request->get('property') == 3) {
    echo 'selected';
}?>>已下单
                        </option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="checkbox"  name="show" value="1" style="width:30px"/>
                </div>
                <div class="form-group">
                    <div>
                        <button class="button button_primary">查询</button>
                    </div>
                </div>
                <div class="form-group">
                    <div>
                        <a type="button" class="button button_ghost"
                           @click="download()">导出</a>
                    </div>
                </div>
            </div>


            <div class="right searchbarIconComb">
                <div class="left center searchbarAudit">

                    <div class="btn-group">
                        <a href="javaScript:void(0)" onclick="$('#customer_add').show()"
                           class="button button_ghost">新增</a>
                    </div>

                </div>
                <div class="left center">

                    <div class="btn-group">
                        <a class="button button_ghost" title="导入excel" href="/statics/template/customer.xls">导入模板下载</a>
                    </div>

                </div>
                <div class="left center">

                    <div class="btn-group">
                        <a type="button" class="button button_ghost" title="导入excel"
                           onclick="show_upload_excel()">导入</a>
                    </div>

                </div>
            </div>
        </form>
        <br/>
        <div style="margin-top:50px;">
            <div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th style="width:120px">编号</th>
                        <th>客户名称</th>
                        <th style="width:140px">联系人邮箱</th>
                        <th>邮箱2</th>
                        <th style="width:160px">当前跟进人</th>
                        <th style="width:80px">客户星级</th>
                        <th style="width:80px">订单属性</th>
                        <th>下单次数</th>
                        <th style="width:100px">联系电话</th>
                        <th>客户来源</th>
                        <th style="width:50px">国家</th>
                        <th style="width:100px">具体地址</th>
                        <th style="width:100px">客户备注</th>
                        <th>Skype</th>
                        <th>WhatsApp</th>
                        <th>Wechat</th>
                        <th style="width:170px">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(v,k) in list" v-cloak>
                        <td>{{v.number}}</td>
                        <td><input v-model="v.customer_name" style="width:100%;border:none" type="text"/></td>
                        <td><input v-model="v.email" style="width:100%;border:none"/></td>
                        <td><input v-model="v.email2" style="width:100%;border:none"/></td>
                        <td>
                            <el-select
                                    v-model="list[k].follow_man"
                                    multiple
                                    filterable
                                    value-key="key"
                                    placeholder="跟进人">
                                <el-option
                                        v-for="item in follow_list"
                                        :key="item.job_number"
                                        :label="item.name"
                                        :value="item.job_number">
                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <select style="width:100%;border:none" v-model="v.customer_star">
                                <option value="1">1星</option>
                                <option value="2">2星</option>
                                <option value="3">3星</option>
                                <option value="4">4星</option>
                                <option value="5">5星</option>
                            </select>
                        </td>

                        <td>
                            <select style="width:100%;border:none" v-model="v.property">
                                <option value=1>未下单</option>
                                <option value=2>样品单</option>
                                <option value=3>以下单</option>
                            </select>
                        </td>
                        <td>{{v.order_times}}次</td>
                        <td><input style="width:100%;border:none" type="text" v-model="v['phone']"/></td>
                        <td>
                            <select style="width:100%;border:none" v-model="v.refer">
                                <option v-for="v2 in refer_list" :value="v2.id">{{v2.name}}</option>
                            </select>
                        </td>
                        <td><input v-model="v.country" style="width:100%;border:none" type="text"/></td>
                        <td><input v-model="v.address" style="width:100%;border:none" type="text"/></td>
                        <td><input v-model="v.customer_remark" style="width:100%;border:none" type="text"/></td>
                        <td><input v-model="v.skype" style="width:100%;border:none" type="text"/></td>
                        <td><input v-model="v.whatsapp" style="width:100%;border:none" type="text"/></td>
                        <td><input v-model="v.wechat" style="width:100%;border:none" type="text"/></td>
                        <td>
                            <a style="color:#108ee9" @click="edit(k)">修改记录</a>
                            <a style="color:#f50" @click="update(v.id)" v-if="showUpdateButton(v.id)">查看审核
                            </a>
                            <a style="color:#87d068" @click="verify(v.id)">客户认证审核
                            </a>
                            <a style="color:red" @click="del(v.id)">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div id="page" style="display: inline-block;"></div>
                <div style="display: inline-block;line-height: 55px">--共<?php echo $this->params['pagecount']; ?>条记录
                </div>

            </div>
        </div>
    </div>

    <!---新增模态框start-->

    <div id="customer_add" zero-unique-container="cc5f48eb7546444fae91a45d7bbe3ff7" class="zeromodal-container"
         style="display:none;max-height: 833px;z-index: 10006; width: 600px; height: auto; left: 328px; top: 100px; position: absolute; margin: 0px;">
        <div zero-unique-top="cc5f48eb7546444fae91a45d7bbe3ff7" class="zeromodal-top" style="cursor: move;"></div>
        <div zeromodal-unqiue-header="cc5f48eb7546444fae91a45d7bbe3ff7" class="zeromodal-header"><span
                    class="modal-title">新增客户</span>
        </div>
        <div zero-unique-body="cc5f48eb7546444fae91a45d7bbe3ff7" class="zeromodal-body zeromodal-overflow-y"
             style="height: auto; max-height: 691px;">
            <style>
                .mtop_6 {
                    margin-left: -100px;
                }
            </style>

            <div class="tip_wrapper" style="display:none">
            </div>
            <form id="partyAddForm" name="partyAddForm" class="subform alignCenter" role="form" method="post" action="">
                <div>
                    <div class="form-field">
                        <label for="remark">客户名称:</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" required name="customer_name" maxlength="32">
                    </div>
                </div>
                <div>
                    <div class="form-field">
                        <label for="remark">联系人名称：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" name="link_man" maxlength="32">
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">email：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" required name="email" maxlength="20">
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">联系电话：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" required name="phone" maxlength="20">
                    </div>
                </div>


                <div>
                    <div class="form-field">
                        <label for="remark">当前跟进人：</label>
                    </div>
                    <div class="form-district">
                        <select class="large" id="follow_man">
                            <option value=0>--请选择--</option>
                            <?php foreach ($data['saleman_list'] as $k => $v) {?>
                                <option value=<?php echo $v['job_number']; ?>><?php echo $v['name']; ?></option>
                            <?php }?>
                        </select>
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">客户状态：</label>
                    </div>
                    <div class="form-district">
                        <select class="large" id="customer_status">
                            <?php foreach ($data['status_list'] as $k => $v) {?>
                                <option value=<?php echo $v['id']; ?>><?php echo $v['name']; ?></option>
                            <?php }?>
                        </select>
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">客户星级：</label>
                    </div>
                    <div class="form-district">
                        <select class="large" id="customer_star">
                            <option value=0>--请选择--</option>
                            <option value=1>1星</option>
                            <option value=2>2星</option>
                            <option value=3>3星</option>
                            <option value=4>4星</option>
                            <option value=5>5星</option>
                        </select>
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">分组：</label>
                    </div>
                    <div class="form-district">
                        <select class='large' id="customer_group">
                            <option value=0>--请选择--</option>
                            <?php foreach ($data['group_list'] as $k => $v) {?>
                                <option value=<?php echo $v['id']; ?>><?php echo $v['name']; ?></option>
                            <?php }?>
                        </select>
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">订单属性：</label>
                    </div>
                    <div class="form-district">
                        <select class="large" id="property">
                            <option value=0>--请选择--</option>
                            <option value=1>未下单</option>
                            <option value=2>样品单</option>
                            <option value=3>已下单</option>
                        </select>
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">客户来源：</label>
                    </div>
                    <div class="form-district">
                        <select class="large" id="customer_refer">
                            <option value=0>--请选择--</option>
                            <?php foreach ($data['refer_list'] as $k => $v) {?>
                                <option value="<?php echo $v['id']; ?>"><?php echo $v['name']; ?></option>
                            <?php }?>
                        </select>
                    </div>
                </div>
                <div>
                    <div class="form-field">
                        <label for="remark">主营产品：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" name="products" maxlength="20">
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">国家：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" name="country" maxlength="20">
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">客户备注：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" name="customer_remark" placeholder="">
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">联系人方式：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" name="linkman_phone" placeholder=""/>
                    </div>
                </div>

                <div>
                    <div class="form-field">
                        <label for="remark">联系人备注：</label>
                    </div>
                    <div class="form-district">
                        <input class="remark large" name="linkman_remark" placeholder=""/>
                    </div>
                </div>
                <button class="zeromodal-btn zeromodal-btn-primary">确定</button>
                <button onclick="$('#customer_add').hide();return false;" class="zeromodal-btn zeromodal-btn-default">取消
                </button>

            </form>
        </div>
        <div class="zeromodal-footer">
            <div class="zeromodal-line"></div>
            <div zeromodal-btn-container="cc5f48eb7546444fae91a45d7bbe3ff7" class="zeromodal-btn-container">
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#main",
            data: {
                role:<?php echo $data['role']; ?>,
                list:<?php echo json_encode($data['list']); ?>,
                follow_list:<?php echo json_encode($data['saleman_list']); ?>,
                status_list:<?php echo json_encode($data['status_list']); ?>,
                customer_group:<?php echo json_encode($data['group_list']); ?>,
                refer_list:<?php echo json_encode($data['refer_list']); ?>,
                customer_update_list:<?php echo json_encode($data['customer_log_list']); ?>
            },
            methods: {
                edit(id) {
                    var data = JSON.stringify(this.list[id]);
                    layer.confirm("确认修改", {}, function () {
                        $.post('/setting/update_customer', {data: data}, function (res) {
                            layer.alert(res.msg);
                        }, 'json')
                    })
                },
                showUpdateButton(id) {
                    if (this.role != 1 && this.role != 2) {
                        return false;
                    }
                    let a = 0;
                    this.customer_update_list.map((v) => {
                        if (v.customer_id == id) {
                            a = 1;
                        }
                    });
                    return a;
                },
                update(id) {
                    let data;
                    this.customer_update_list.map((v) => {
                        if (v.customer_id == id) {
                            data = v.sql;
                        }
                    });
                    const arr = JSON.parse(data);
                    const url = '/api/customer-update?id=' + arr.id;
                    zeroModal.show({url: url, width: '1400px', height: '500px'});
                },
                verify(id) {
                    this.$confirm("确认审核").then(()=>{
                        $.post('/api/customer/verify',{id:id},(res)=>{
                            if (res.code==1) {
                                this.$message({
                                    message:res.msg,
                                    type:'success'
                                })
                            }else {
                                this.$message({
                                    message:res.msg,
                                    type:'error'
                                })
                            }
                        },'json')
                    })
                },
                download() {
                    var url = '/api/download/customer'+window.location.search;
                    window.open(url);
                    console.log(window.location.search);
                },
                del(id){
                    this.$confirm("确认删除").then(()=>{
                        $.post('/api/customer/del',{id:id},(res)=>{
                            if (res.code==1) {
                                this.$message({
                                    type:'success',
                                    message:res.msg
                                });
                                setTimeout(function(){
                                    window.location.reload();
                                },500);

                            }else {
                               this.$message({
                                    type:'error',
                                    message:res.msg
                               })
                            }
                        },'json');

                    })
                }
            }
        });
        layui.laypage({
            cont: 'page'
            , pages: <?php echo $this->params['page']['page']; ?>
            , curr:<?php echo $this->params['page']['curr']; ?>
            , skin: '#5FB878'
            , skip: true
            , jump: function (obj, first) {
                if (!first) {
                    if (!window.location.search) {
                        window.location.href = "<?php echo $this->params['page']['base_url']; ?>?p=" + obj.curr;
                    }
                    else {
                        window.location.href = "<?php echo $this->params['page']['base_url']; ?>&p=" + obj.curr;
                    }

                }
            }
        });
    </script>
    <script type="text/javascript">
        $.validator.setDefaults({
            submitHandler: function () {
                var data = {};
                data.customer_name = $("input[name=customer_name]").val();
                data.link_man = $("input[name=link_man]").val();
                data.email = $("input[name=email]").val();
                data.phone = $("input[name=phone]").val();
                data.follow_man = $("#follow_man").val();
                data.customer_status = $("#customer_status").val();
                data.customer_star = $("#customer_star").val();
                data.customer_group = $("#customer_group").val();
                data.property = $("#property").val();
                data.refer = $("#customer_refer").val();
                data.products = $("input[name=products]").val();
                data.country = $("input[name=country]").val();
                data.customer_remark = $("input[name=customer_remark]").val();
                data.linkman_phone = $("input[name=linkman_phone]").val();
                data.linkman_remark = $("input[name=linkman_remark]").val();
                $.post('/setting/customer_add', {data: data}, function (res) {
                    if (res.code == 1) {
                        layer.confirm(res.msg, {}, function () {
                            window.location.reload();
                        })
                    }
                    else {
                        layer.alert(res.msg);
                    }
                }, 'json')

            }
        });
        $().ready(function () {
            $("#partyAddForm").validate();
        });

    </script>
    <!---新增模态框end-->

    <!--上传模态框start-->
    <div id="excel_modal" class="zeromodal-container"
         style="max-height: 801px; z-index: 10004; width: 900px; height: auto; left: 312px;display:none;top: 100px;position: absolute; margin: 0px;">
        <div class="zeromodal-top" style="cursor: move;"></div>
        <div class="zeromodal-header">
            <div title="关闭" onclick="close_upload_excel()" class="zeromodal-close">×</div>
            <span class="modal-title">导入</span></div>
        <div class="zeromodal-body zeromodal-overflow-y" style="height: auto; max-height: 659px;">
            <div class="tip_wrapper" style="display:none;margin: 0 0 18px;">
            </div>

            <div id="preview_page">
                <p style="margin-bottom:27px;text-align:center">请选择需要导入的文件：</p>

                <input type="file" id="file">
                <script>
                    function uploadexcel() {
                        var file = $("#file")[0].files[0];
                        if (!file) {
                            layer.alert("未选择文件");
                            return false;
                        }
                        var url = "<?php echo Url::to(['setting/upload_customer_excel']); ?>";
                        var formdata = new FormData();
                        formdata.append('file', file);
                        layer.load(1, {
                            shade: [0.1, '#fff']
                        });

                        $.ajax({
                            url: url,
                            type: 'POST',
                            cache: false,
                            data: formdata,
                            dataType: 'json',
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                layer.closeAll('loading');
                                if (res.code == 1) {
                                    layer.confirm('添加成功', {}, function () {
                                        window.location.reload();
                                    })
                                }
                                else {
                                    layer.alert("添加失败,请重试");
                                }
                            }
                        })
                    }
                </script>
            </div>
        </div>
        <div class="zeromodal-footer">
            <div class="zeromodal-line"></div>
            <div class="zeromodal-btn-container">
                <button class="zeromodal-btn zeromodal-btn-primary importTallySaveBtn" onclick="uploadexcel()">上传
                </button>
                <button class="zeromodal-btn zeromodal-btn-default" onclick="close_upload_excel()">关闭</button>
            </div>
        </div>
    </div>
    <!--上传模态框end-->
    </div>
    <script>
        function show_upload_excel() {
            $("#excel_modal").show();
        }

        function close_upload_excel() {
            $("#excel_modal").hide();
        }
    </script>
</div>
<?php echo $this->render('/public/footer'); ?>